<template>
  <div class="app-container">
    <div class="firstDiv">
      <div class="module">
        <div class="moduleImg">
          <div >
            <img style="width: 50px;height: 50px;" src="../assets/images/index/icon_gongdingguan.png" />
          </div>
        </div>
        <div class="moduleContent">
          <div class="moduleContentText">拱顶罐数量</div>
          <div class="moduleContentNum">123,411</div>
        </div>
      </div>
      <div class="module">
        <div class="moduleImg">
          <div >
            <img style="width: 50px;height: 50px;" src="../assets/images/index/icon_waifudingguan.png" />
          </div>
        </div>
        <div class="moduleContent">
          <div class="moduleContentText">外浮顶罐数量</div>
          <div class="moduleContentNum">123,411</div>
        </div>
      </div>
      <div class="module">
        <div class="moduleImg">
          <div >
            <img style="width: 50px;height: 50px;" src="../assets/images/index/icon_neifudingguan.png" />
          </div>
        </div>
        <div class="moduleContent">
          <div class="moduleContentText">内浮拱顶罐数量</div>
          <div class="moduleContentNum">123,411</div>
        </div>
      </div>
    </div>
    <div class="secondDiv">
      <div class="module">
        <div class="moduleTitle">
          本地区各类型储罐数量
        </div>
        <div class="moduleContent">
          <div ref="storageTankTypeChart" style="width: 100%; height: 340px;"></div>
        </div>
      </div>
      <div class="module">
        <div class="moduleTitle">
          本地区罐容类型周转量
        </div>
        <div class="moduleContent">
          <div ref="tankCapacityTypeChart" style="width: 100%; height: 340px;"></div>
        </div>
      </div>
    </div>
    <div class="secondDiv">
      <div class="module">
        <div class="moduleTitle">
          本地区罐容类型容量
        </div>
        <div class="moduleContent">
          <div ref="capacityTypeChart" style="width: 100%; height: 340px;"></div>
        </div>
      </div>
      <div class="module">
        <div class="moduleTitle">
          本地区各类型储罐油品平均温度
        </div>
        <div class="moduleContent" style="display: flex;flex-wrap: wrap;justify-content: center;align-items: center">
          <div ref="averageTemperatureChart41" style="width: 50%; height: 170px;"></div>
          <div ref="averageTemperatureChart42" style="width: 50%; height: 170px;"></div>
          <div ref="averageTemperatureChart43" style="width: 50%; height: 170px;"></div>
          <div ref="averageTemperatureChart44" style="width: 50%; height: 170px;"></div>
        </div>
      </div>
    </div>
    <div style="height: 30px;"></div>
  </div>
</template>

<script>
  import * as echarts from 'echarts';

export default {
  name: "Index",
  data() {
    return {
      // 版本号
      version: "3.8.8"
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },
    initChart(){
      this.initStorageTankTypeChart();
      this.initTankCapacityTypeChart();
      this.initCapacityTypeChart();
      this.initAverageTemperatureChart();
    },
    //本地区各类型储罐数量
    initStorageTankTypeChart(){
      let chart1 = echarts.init(this.$refs.storageTankTypeChart);
      let option1 = {
        title: {
          show: false,
          text: 'Referer of a Website',
          subtext: 'Fake Data',
          left: 'center'
        },
        tooltip: {
          show: true,
          trigger: 'item',
          formatter: '{b0}: {c0}'
        },
        legend: {
          orient: 'vertical',
          right: 50,
          top: 'center',
          bottom: 20,
          itemHeight: 20,
          itemWidth: 80,
          textStyle: {
            color: '#333',
            fontStyle: 'normal' ,
            fontWeight: 'normal' ,
            fontFamily: 'sans-serif' ,
            fontSize: 16 ,
          }
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            right: '30%',
            label: {
              show: true,
              formatter: '{b}: 占比{d}%'
            },
            data: [
              { value: 1048, name: '原油' },
              { value: 735, name: '汽油' },
              { value: 580, name: '柴油' },
              { value: 484, name: '其他油品' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      chart1.setOption(option1);
    },

    //本地区罐容类型周转量
    initTankCapacityTypeChart(){
      let chart2 = echarts.init(this.$refs.tankCapacityTypeChart);
      let option2 = {
        xAxis: {
          type: 'category',
          data: ['类型1', '类型2', '类型3', '类型4', '类型5', '类型6', '类型7']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            barWidth: '30%',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1, // x1, y1, x2, y2 定义渐变方向
                [
                  {offset: 0, color: '#A1CBFD'},
                  {offset: 0.5, color: '#6A91DD'},
                  {offset: 1, color: '#3D75E7'}
                ]
              )
            }
          }
        ]
      };
      chart2.setOption(option2);
    },

    //本地区罐容类型容量
    initCapacityTypeChart(){
      let chart3 = echarts.init(this.$refs.capacityTypeChart);
      let option3 = {
        xAxis: {
          type: 'category',
          data: ['类型1', '类型2', '类型3', '类型4', '类型5', '类型6', '类型7', '类型8']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [150, 180, 174, 160, 125, 122, 150, 170],
            type: 'line'
          }
        ]
      };
      chart3.setOption(option3);
    },

    //本地区各类型储罐油品平均温度
    initAverageTemperatureChart(){
      let chart41 = echarts.init(this.$refs.averageTemperatureChart41);
      let option41 = {
        series: [
          {
            type: 'gauge',
            center: ['50%', '60%'],
            startAngle: 200,
            endAngle: -20,
            min: 0,
            max: 100,
            splitNumber: 10,
            itemStyle: {
              color: '#6A91DD'
            },
            progress: {
              show: true,
              width: 10
            },
            pointer: {
              show: false
            },
            axisLine: {
              lineStyle: {
                width: 10
              }
            },
            axisTick: {
              distance: -15,
              splitNumber: 5,
              lineStyle: {
                width: 1,
                color: '#999'
              }
            },
            splitLine: {
              distance: -22,
              length: 14,
              lineStyle: {
                width: 2,
                color: '#999'
              }
            },
            axisLabel: {
              distance: -20,
              color: '#999',
              fontSize: 10
            },
            anchor: {
              show: false
            },
            title: {
              show: true,
            },
            detail: {
              valueAnimation: true,
              width: '60%',
              lineHeight: 40,
              borderRadius: 8,
              offsetCenter: [0, '-15%'],
              fontSize: 14,
              fontWeight: 'bolder',
              formatter: '{value} °C',
              color: 'inherit'
            },
            data: [
              {
                name: "原油",
                value: 20
              }
            ]
          }
        ]
      };
      chart41.setOption(option41);

      let chart42 = echarts.init(this.$refs.averageTemperatureChart42);
      let option42 = {
        series: [
          {
            type: 'gauge',
            center: ['50%', '60%'],
            startAngle: 200,
            endAngle: -20,
            min: 0,
            max: 100,
            splitNumber: 10,
            itemStyle: {
              color: '#6A91DD'
            },
            progress: {
              show: true,
              width: 10
            },
            pointer: {
              show: false
            },
            axisLine: {
              lineStyle: {
                width: 10
              }
            },
            axisTick: {
              distance: -15,
              splitNumber: 5,
              lineStyle: {
                width: 1,
                color: '#999'
              }
            },
            splitLine: {
              distance: -22,
              length: 14,
              lineStyle: {
                width: 2,
                color: '#999'
              }
            },
            axisLabel: {
              distance: -20,
              color: '#999',
              fontSize: 10
            },
            anchor: {
              show: false
            },
            title: {
              show: true
            },
            detail: {
              valueAnimation: true,
              width: '60%',
              lineHeight: 40,
              borderRadius: 8,
              offsetCenter: [0, '-15%'],
              fontSize: 14,
              fontWeight: 'bolder',
              formatter: '{value} °C',
              color: 'inherit'
            },
            data: [
              {
                name: "汽油",
                value: 20
              }
            ]
          }
        ]
      };
      chart42.setOption(option42);

      let chart43 = echarts.init(this.$refs.averageTemperatureChart43);
      let option43 = {
        series: [
          {
            type: 'gauge',
            center: ['50%', '60%'],
            startAngle: 200,
            endAngle: -20,
            min: 0,
            max: 100,
            splitNumber: 10,
            itemStyle: {
              color: '#6A91DD'
            },
            progress: {
              show: true,
              width: 10
            },
            pointer: {
              show: false
            },
            axisLine: {
              lineStyle: {
                width: 10
              }
            },
            axisTick: {
              distance: -15,
              splitNumber: 5,
              lineStyle: {
                width: 1,
                color: '#999'
              }
            },
            splitLine: {
              distance: -22,
              length: 14,
              lineStyle: {
                width: 2,
                color: '#999'
              }
            },
            axisLabel: {
              distance: -20,
              color: '#999',
              fontSize: 10
            },
            anchor: {
              show: false
            },
            title: {
              show: true
            },
            detail: {
              valueAnimation: true,
              width: '60%',
              lineHeight: 40,
              borderRadius: 8,
              offsetCenter: [0, '-15%'],
              fontSize: 14,
              fontWeight: 'bolder',
              formatter: '{value} °C',
              color: 'inherit'
            },
            data: [
              {
                name: "柴油",
                value: 20
              }
            ]
          }
        ]
      };
      chart43.setOption(option43);

      let chart44 = echarts.init(this.$refs.averageTemperatureChart44);
      let option44 = {
        series: [
          {
            type: 'gauge',
            center: ['50%', '60%'],
            startAngle: 200,
            endAngle: -20,
            min: 0,
            max: 100,
            splitNumber: 10,
            itemStyle: {
              color: '#6A91DD'
            },
            progress: {
              show: true,
              width: 10
            },
            pointer: {
              show: false
            },
            axisLine: {
              lineStyle: {
                width: 10
              }
            },
            axisTick: {
              distance: -15,
              splitNumber: 5,
              lineStyle: {
                width: 1,
                color: '#999'
              }
            },
            splitLine: {
              distance: -22,
              length: 14,
              lineStyle: {
                width: 2,
                color: '#999'
              }
            },
            axisLabel: {
              distance: -20,
              color: '#999',
              fontSize: 10
            },
            anchor: {
              show: false
            },
            title: {
              show: true
            },
            detail: {
              valueAnimation: true,
              width: '60%',
              lineHeight: 40,
              borderRadius: 8,
              offsetCenter: [0, '-15%'],
              fontSize: 14,
              fontWeight: 'bolder',
              formatter: '{value} °C',
              color: 'inherit'
            },
            data: [
              {
                name: "其他油品",
                value: 20
              }
            ]
          }
        ]
      };
      chart44.setOption(option44);
    },
  }
};
</script>

<style scoped lang="scss">
  .app-container{
    background-color: #F4F5FC;
    height: calc(100vh - 84px);
    overflow: auto;
    padding-bottom: 20px;
  }
.firstDiv{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .module{
    background-color: #FFFFFF;
    width: 32%;
    height: 150px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .moduleImg{
      width: 40%;
      display: flex;
      justify-content: center;
      align-items: center;
      div{
        width: 90px;
        height: 90px;
        border-radius: 50%;
        background-color: #F1F5FE;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    .moduleContent{
      width: 60%;
      display: flex;
      flex-direction: column;
      justify-content: left;
      text-align: left;
      line-height: 35px;
      .moduleContentText{
        font-size: 16px;
      }
      .moduleContentNum{
        font-size: 24px;
        font-weight: bold;
      }
    }
  }
}
  .secondDiv{
    margin-top: 20px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .module{
      background-color: #FFFFFF;
      width: 49%;
      height: 400px;
      .moduleTitle{
        height: 50px;
        font-weight: bold;
        font-size: 18px;
        padding: 10px 20px;
      }
      .moduleContent{
        height: 350px;
      }
    }
  }
  .thirdDiv{

  }
</style>

